<template>
  <div>
    <el-divider>选项</el-divider>
    <el-radio-group v-model="activeData.config.optionsType">
      <el-radio-button :label="0"> 静态数据 </el-radio-button>
      <el-radio-button :label="1"> 动态数据 </el-radio-button>
      <el-radio-button :label="2"> 字典数据 </el-radio-button>
    </el-radio-group>

    <!-- 远程赋值配置 -->
    <div v-if="activeData.config.optionsType === 1">
      <el-input
        v-model="activeData.config.dynamicOptions.url"
        size="mini"
        placeholder="https://api.tduckcloud.com/xxx.json"
      >
        <template slot="prepend"> 接口url </template>
      </el-input>
      <el-input v-model="activeData.config.dynamicOptions.dataPath" size="mini" placeholder="data">
        <template slot="prepend"> 列表数据jsonPath </template>
      </el-input>
      <el-input v-model="activeData.config.dynamicOptions.valueField" size="mini" placeholder="value">
        <template slot="prepend"> 值字段 </template>
      </el-input>
      <el-input v-model="activeData.config.dynamicOptions.labelField" size="mini" placeholder="label">
        <template slot="prepend"> 标签字段 </template>
      </el-input>
    </div>
    <div v-if="activeData.config.optionsType === 0">
      <draggable :animation="340" :list="activeData.config.options" group="selectItem" handle=".option-drag">
        <div v-for="(item, index) in activeData.config.options" :key="index" class="select-item">
          <div class="select-line-icon option-drag">
            <i class="el-icon-s-operation" />
          </div>
          <el-input v-model="item.label" placeholder="选项名" size="small" />
          <div class="close-btn select-line-icon" @click="activeData.config.options.splice(index, 1)">
            <i class="el-icon-remove-outline" />
          </div>
        </div>
      </draggable>
      <div style="margin-left: 20px; margin-bottom: 10px">
        <el-button icon="el-icon-circle-plus-outline" style="padding-bottom: 0" type="text" @click="addSelectItem">
          添加选项
        </el-button>
        <el-button
          icon="el-icon-document-copy"
          style="padding-bottom: 0"
          type="text"
          @click="openBatchEditDialogHandle"
        >
          批量编辑
        </el-button>
        <el-button
          v-if="['CHECKBOX', 'RADIO'].indexOf(activeData.typeId) > -1"
          icon="el-icon-circle-plus-outline"
          style="padding-bottom: 0"
          type="text"
          @click="addSelectOtherItem"
        >
          添加其他
        </el-button>
      </div>
      <el-dialog title="批量编辑" :visible.sync="dialogVisible" width="30%">
        <span class="desc-text">每行对应一个选项</span>
        <el-input
          v-model="batchItemValue"
          type="textarea"
          :autosize="{ minRows: 20, maxRows: 5000 }"
          placeholder="选项1 选项2  选项3 "
        />
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="batchEditSelectItems">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <div v-if="activeData.config.optionsType === 2">
      <el-form-item label="字典选择" class="mt10">
        <el-select v-model="activeData.config.dictOptionType" placeholder="请选择字典">
          <el-option v-for="item in dictTypeList" :key="item.dictType" :label="item.dictName" :value="item.dictType" />
        </el-select>
      </el-form-item>
    </div>
  </div>
</template>

<script>
import _ from 'lodash'
import draggable from 'vuedraggable'
import { optionselect } from '@/api/system/dict/type'

export default {
  name: 'ConfigItemOption',
  components: {
    draggable
  },
  props: ['activeData'],
  data() {
    return {
      batchItemValue: '',
      dialogVisible: false,
      dictTypeList: []
    }
  },
  created() {
    optionselect().then((res) => {
      this.dictTypeList = res.data
    })
  },
  methods: {
    addSelectItem() {
      const lastItem = _.last(this.activeData.config.options) || { value: 0 }
      const value =
        lastItem.value !== 0
          ? _.max(_.values(this.activeData.config.options.map((item) => item.value))) + 1
          : lastItem.value + 1
      this.activeData.config.options.push({
        label: '',
        value: lastItem ? value : 1
      })
    },
    openBatchEditDialogHandle() {
      this.batchItemValue = _.join(
        this.activeData.config.options.map((item) => item.label),
        '\n'
      )
      this.dialogVisible = true
    },
    async batchEditSelectItems() {
      const arrStrs = this.batchItemValue
      const arr = arrStrs.split('\n')
      if (arr.length > 1) {
        const options = []
        for (let index = 0; index < arr.length; index++) {
          const element = arr[index]
          if (element) {
            options.push({
              label: element,
              value: index + 1
            })
          }
        }
        this.activeData.config.options = options
        this.dialogVisible = false
      }
    },
    addSelectOtherItem() {
      const item = this.activeData.config.options.find((option) => option.value === 0)
      if (item) {
        return
      }
      this.activeData.config.options.push({
        label: '其他',
        value: 0
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../../assets/styles/config/options.scss';
</style>
